<template>
  <div class="indexFour">
    <h2>
      <i class="iconfont icon-huo mini"></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo "></i> 霜降寒意重·礼来情谊浓
      
      <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo mini"></i>
      <!-- http://www.higuang365.com/public/dist/ -->
      <!-- <div class="module-time" v-if="countDown">
        <div data-v-650e4c98="" class="time-info">
          <span>抢 购</span><br /><span>倒计时</span>
        </div>
        <van-count-down :time="time" @finish="onFinish">
          <template #default="timeData">
            <span class="block">{{ timeData.hours + timeData.days * 24 }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="module-time" style="color: rgb(234, 48, 48)" v-else-if="!countDown&&popular[0].F_Number > 0 ">
        正在抢购中
      </div>
      <div class="module-time" style="color: rgb(234, 48, 48)" v-else>
        已抢完
      </div> -->

      <!-- <span
            class="more"
             v-if="popular.length>3"
            @click="
              $router.push({
                path: '/giveAnEncore',
              })
            "
            >更多<van-icon name="arrow" /></span> -->
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <van-skeleton title :row="5" v-if="popular.length == 0" />

    <div class="my-swipe" v-else>
      <div v-for="value in popular" :key="value.F_ProductId">
        <div class="popular" v-if="value.F_Number > 0 && value.F_ClassUp == 'true'" @click="value.F_Number > 0
          ? $router.push({
            path: '/product',
            query: { id: value.F_ProductId, parents_id: username },
          })
          : ''">
          <!-- <div class="popular-img" :class="{ sellOut: value.F_Number <= 0&&!countDown }">
            <img :src="'http://higuang365.com/' + value.F_pic_url" />
          </div>
          <div class="popular-text">
            <div class="title">{{ value.F_Name }}</div>
            <div class="introduce">{{ value.F_yuliu4 }}</div>
            <div>
              <span class="price">￥{{ value.F_BdPrice }}</span>
              <span class="estimate">零售价：{{ value.F_Price }}</span>
              <div
                class="iconfont icon-fenxiang fenxiang"
                v-if="!countDown && value.F_Number > 0"
              >
                立即购买
              </div>
            </div>
          </div> -->
          <img v-if="countDown" v-lazy="`http://higuang365.com/public/images/common/activity/Boutique/${value.F_ProductId +
            (value.F_Number > 0 ? '' : '-2')}.jpg`
            " />
          <!-- <img v-if="countDown" src="http://higuang365.com/public/images/common/activity/Boutique/oil.jpg"/> -->
          <!-- <img v-else-if="!countDown && value.F_Number > 0" src="http://higuang365.com/public/images/common/activity/51/oil.jpg"/>
          <img v-else src="http://higuang365.com/public/images/common/activity/51/oil.jpg"/> -->
        </div>
      </div>
      <!-- <template #indicator="{ active }">
        <div class="custom-indicator">
          {{ active + 1 }}/{{ popular.length }}
        </div>
      </template> -->
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetH11GoodsList } from "@/api/home";
import { getCookie } from "@/lib/ecapi";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const data: {
      popular: [];
      countDown: boolean;
      username: string;
    } = reactive({
      popular: [
        // {
        //   F_Amount: 3,
        //   F_BdPrice: 10,
        //   F_BrandCountrie: "阿根廷",
        //   F_ClassUp: "true",
        //   F_Code: "G6118AE60CF4FC",
        //   F_Name: "CITRIC鲜汁客苹果汁1L",
        //   F_Number: "1",
        //   F_Price: 45,
        //   F_ProductId: "300100000",
        //   F_SpecialPrice: 10,
        //   F_Unit: "瓶",
        //   F_pic_url: "public/images/common/activity/giveAnEncore/apple.jpg",
        //   F_yuliu2:
        //     "public/images/97/73/bc/b0b85691a980178770b1487ecf0c0a4da71e3c54.png",
        //   F_yuliu3: "2945",
        //   F_yuliu4:
        //     "阿根廷苹果汁精选优质水果，营养丰富，富含多种维生素，不添加任何防腐剂，采摘24小时内榨汁保鲜技术，纯粹口感，优质体验",
        // },
      ],
      countDown: true,
      // unSellOut:true,
      // time: new Date("2022/5/11 11:00:00").getTime() - new Date().getTime(),
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      console.log();

      const res = await GetH11GoodsList({
        pageNum: 1,
        pageSize: 22,
        tag_id: "36", //39
        strlv: getCookie("MLV"),
      });
      // console.log(res);
      // console.log('ww', getCookie("MLV"));

      if (!res[0]) {
        const res = await GetH11GoodsList({
          pageNum: 1,
          pageSize: 22,
          tag_id: "36", //39
          strlv: getCookie("MLV"),
        });
        // if (res[1].length == 0) {
        //   data.popular[0].F_Number="0";
        //   return;
        // }

        data.popular = res[1];
        return;
      }
      // if (res[1].length == 0) {
      //   data.popular[0].F_Number="0";
      //   return;
      // }
      data.popular = res[1];
    };
    const onFinish = () => {
      // data.countDown=false;
      // onLoad();
    };
    onLoad();
    return { ...toRefs(data), onFinish };
  },
});
</script>
<style lang="scss" scoped>
.indexFour {

  // filter: grayscale(100%);
  h2 {
    font-size: 1.8rem;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    text-align: center;
    margin-bottom: 1rem;

    i {
      color: red;
    }

    .icon-huo {
      font-size: 2rem;
    }

    .mini {
      font-size: 1.4rem;
    }

    .middle {
      font-size: 1.7rem;
    }

    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }

  .my-swipe {
    margin: 0;
  }

  .popular {
    display: flex;

    img {
      margin: 0.5rem 0;
      border-radius: 1rem;
      overflow: hidden;
    }
  }

  .popular-img {
    flex: 1;
    position: relative;

    img {
      height: auto;
      border-radius: 1rem;
    }

    &.sellOut:after {
      content: " 已售罄 ";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      border-radius: 1rem;
      opacity: 0.5;
      color: #fff;
      white-space: nowrap;
      font-size: 2rem;
      text-align: center;
      padding: calc(50% - 1.5rem) 0;
      border-radius: 1rem;
      box-sizing: border-box;
    }
  }

  .popular-text {
    flex: 1.4;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 1rem;
    background: url("") no-repeat;
    background-size: contain;
    background-position-x: right;

    .title {
      font-weight: 550;
      font-size: 1.4rem;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
      height: 2rem;
      line-height: 2rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    .introduce {
      color: #777;
      width: 90%;
      height: 4.8rem;
      margin: auto;
      font-size: 1.1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.6rem;
      overflow: hidden;
    }

    .price {
      color: red;
      font-weight: 600;
      font-size: 1.6rem;
      margin-right: 1rem;
    }

    .estimate {
      font-size: 1rem;
      color: #c5c5c5;
      text-decoration: line-through;
    }

    .fenxiang {
      color: #0f8a40;
      padding-top: 0.5rem;
      font-size: 1.1rem;
    }
  }

  .module-time {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    padding: 0.5rem 0;
    // background: #fef2f1;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    display: none;

    .colon {
      display: inline-block;
      height: 2.6rem;
      line-height: 2.6rem;
      margin: 0 2px;
      color: #ff0606;
    }

    .block {
      width: 1.8rem;
      height: 1.8rem;
      margin: 0.2rem;
      display: inline-block;
      border-radius: 3px;
      color: #fff;
      font-size: 1rem;
      text-align: center;
      background-color: #ff0606;
    }

    .time-info {
      color: rgb(234, 48, 48);
      font-size: 1rem;
      margin-right: 0.5rem;
    }
  }
}

.custom-indicator {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
}
</style>
